// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Item {
    id: poi_search
    width: 400
    height: 500

//    Rectangle {
//        id: rectangle_bg
//        color: "#021e69"
//        anchors.fill: parent
//    }

    function hide()
    {
        mmultitextinput1.hide();
    }

    function num_to_letter(num)
    {
        var s = "";
        switch (num)
        {
        case 0:
            s = "A";
            break;
        case 1:
            s = "B";
            break;
        case 2:
            s = "C";
            break;
        case 3:
            s = "D";
            break;
        case 4:
            s = "E";
            break;
        case 5:
            s = "F";
            break;
        case 6:
            s = "G";
            break;
        case 7:
            s = "H";
            break;
        case 8:
            s = "I";
            break;
        case 9:
            s = "J";
            break;
        }
        return s;
    }

    MMultiTextInput {
        id: mmultitextinput1
        x: 40
        anchors.top: parent.top
        anchors.topMargin: 10
        anchors.right: parent.right
        anchors.rightMargin: 0
        text: "请输入要搜索的位置"

        onSearch: backend.search_poi(mmultitextinput1.text_input);
    }

    Keys.onReturnPressed:
    {
        backend.search_poi(mmultitextinput1.text_input);
    }

    Item {
        id: item_result
        clip: false
        anchors.right: parent.right
        anchors.rightMargin: 15
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        anchors.top: mmultitextinput1.bottom
        anchors.topMargin: 20

        ListView {
            id: list_view_result
            x: 0
            width: parent.width
            clip: true
            spacing: 10
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 0
            delegate: Item {
                x: 5
                height: 40
                width: parent.width

                MouseArea
                {
                    anchors.fill: parent
                    onClicked:
                    {
                        backend.map_pan_to(poi_x, poi_y);
                        item_detail.name = name;
                        item_detail.type = type;
                        item_detail.address = address;
                        item_detail.tel = tel;
                        item_detail.pguid = pguid;
                        item_detail.poi_x = poi_x;
                        item_detail.poi_y = poi_y;
                        poi_search.state == "" ? poi_search.state = "detail" : poi_search.state = "" ;
                    }
                }

                Row {
                    id: row1
                    spacing: 10

                    Rectangle {
                        width: 40
                        height: 40
                        color: "#00000000"
                        border.color: "lightblue"
                        border.width: 2
                        radius: 40
                        smooth: true

                        Text
                        {
                            anchors.centerIn: parent
                            color: "white"
                            font.pixelSize: 18
                            text: num_to_letter(index)
                        }
                    }

                    Text {
                        text: name
                        width: list_view_result.width - 50
                        anchors.verticalCenter: parent.verticalCenter
//                        font.bold: true
                        font.pixelSize: 26
                        color: "white"
                        elide: Text.ElideRight
                    }


                }
            }
            model: data_map.get_model_poi()
        }

        Item {
            id: item_detail
            width: parent.width
            anchors.left: list_view_result.right
            anchors.leftMargin: 20
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 0

            property string name: ""
            property string type: ""
            property string address: ""
            property string tel: ""
            property string pguid: ""
            property string poi_x: ""
            property string poi_y: ""

            Rectangle {
                id: rectangle_detail_bg
                color: "#000000"
                opacity: 0.300
                anchors.leftMargin: 0
                anchors.fill: parent
            }

            Column {
                id: column1
                anchors.topMargin: 10
                spacing: 9
                anchors.fill: parent

                Text {
                    id: text1
                    y: 55
                    color: "#ffffff"
                    text: "" + item_detail.name
                    anchors.left: parent.left
                    anchors.leftMargin: 50
                    font.pixelSize: 26
                }

                Text {
                    id: text2
                    y: 54
                    width: 330
                    color: "#ffffff"
                    text: "类型：" + item_detail.type
                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                    anchors.left: parent.left
                    anchors.leftMargin: 20
                    font.pixelSize: 24
                }

                Text {
                    id: text3
                    y: 63
                    width: 330
                    color: "#ffffff"
                    text: "地址：" + item_detail.address
                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                    anchors.left: parent.left
                    anchors.leftMargin: 20
                    font.pixelSize: 24
                }

                Text {
                    id: text4
                    y: 62
                    width: 330
                    color: "#ffffff"
                    text: "电话：" + item_detail.tel
                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                    anchors.left: parent.left
                    anchors.leftMargin: 20
                    font.pixelSize: 24
                }

                Row {
                    id: row2
                    y: 154
                    width: 320
                    height: 100
                    spacing: 10
                    anchors.left: parent.left
                    anchors.leftMargin: 20

                    Mbutton {
                        id: mbutton2
                        x: 50
                        y: 20
                        textstring: "作为起点"
                        text_size: 20
                        pro_height: 50
                        pro_width: 100

                        onButtonclick:
                        {
//                            data_map.start_x, data_map.start_y, data_map.end_x, data_map.end_y
                            data_map.start_x = item_detail.poi_x;
                            data_map.start_y = item_detail.poi_y;
                            data_map.start_name = item_detail.name;
                        }
                    }

                    Mbutton {
                        id: mbutton3
                        x: 49
                        y: 21
                        pro_width: 100
                        textstring: "作为终点"
                        pro_height: 50
                        text_size: 20

                        onButtonclick:
                        {
//                            data_map.start_x, data_map.start_y, data_map.end_x, data_map.end_y
                            data_map.end_x = item_detail.poi_x;
                            data_map.end_y = item_detail.poi_y;
                            data_map.end_name = item_detail.name;
                        }
                    }
                }
            }

            ArrowButton {
                id: arrowbutton1
                x: -30
                y: -30
                smooth: true
                scale: 0.400
                rotation: 180

                onArrow_clicked: poi_search.state == "" ? poi_search.state = "detail" : poi_search.state = "" ;
            }

//            Rectangle {
//                id: rectangle1
//                x: 0
//                y: 0
//                width: 33
//                height: 32
//                color: "#ffffff"

//                MouseArea {
//                    anchors.fill: parent

//                    onClicked:
//                    {
//                        poi_search.state == "" ? poi_search.state = "detail" : poi_search.state = "" ;
//                    }
//                }
//            }


//            Rectangle {
//                id: rectangle1
//                x: 39
//                y: 66
//                width: 200
//                height: 200
//                color: "#ffffff"

//                MouseArea {
//                    id: mouse_area1
//                    anchors.fill: parent

//                    onClicked:
//                    {
//                        poi_search.state == "" ? poi_search.state = "detail" : poi_search.state = "" ;
//                    }
//                }
//            }
        }
    }


    states: [
        State {
            name: "detail"

            PropertyChanges {
                target: list_view_result
                x: -width - 20
            }
        }
    ]

    transitions: [
        Transition {
            from: ""
            to: "detail"
            ParallelAnimation {
                //                    PropertyAnimation { target: item_content; property: "opacity"; easing.type: Easing.OutCubic;}
                //                    PropertyAnimation { target: mtextinput1; property: "height"; easing.type: Easing.OutCubic;}
                PropertyAnimation { target: list_view_result; property: "x"; easing.type: Easing.OutCubic;}
            }
        },
        Transition {
            from: "detail"
            to: ""
            ParallelAnimation {
                PropertyAnimation { target: list_view_result; property: "x"; easing.type: Easing.OutCubic;}
                //                    PropertyAnimation { target: mtextinput1; property: "height"; easing.type: Easing.OutCubic;}
                //                    PropertyAnimation { target: item_content; property: "opacity"; easing.type: Easing.OutCubic;}
            }
        }
    ]
}
